<template>
    <v-btn class="!w-[32px] !h-[32px] !min-w-[32px] !min-h-[32px] !pl-0 !pr-0" @click="toggleTheme">
        <v-icon icon="mdi-theme-light-dark" size="20"></v-icon>
    </v-btn>
</template>

<script lang="ts" setup>
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

import { useTheme } from 'vuetify'

const theme = useTheme()

// 切换明暗色调
const  toggleTheme= () =>{
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
  // 为页面添加标记
  if (theme.global.name.value == "dark") {
    document.body.setAttribute("dark", "true");
    document.body.removeAttribute("light");
    proxy.$ls.set("dark-theme", true);
  } else {
    document.body.setAttribute("light", "true");
    document.body.removeAttribute("dark");
    proxy.$ls.remove("dark-theme");
  }
}
</script>

<style scoped></style>
